<template>
  <view class="content">
    <image class="logo" src="/static/logo.png" />
    <view @click="requestTsts()" class="text-area">
      <text class="title">{{ title }}</text>
    </view>

    <view @click="usepiniaMethods()" class="text-area">
      <text class="title">使用pinia改变 status持久化数据 {{ userStore.user_name}}</text>
    </view>
    <view @click="jumpHome()" class="text-area">
      <text class="title">没有登录，直接跳转需要登录的页面 会被拦截</text>
    </view>

    <view @click="addTOken()" class="text-area">
      <text class="title">添加token再跳转就可以正常进入</text>
    </view>

    <view @click="jumpUview()" class="text-area">
      <text class="title">跳转到uView页面</text>
    </view>

	<view @click="jumpFildCard()" class="text-area">
	  <text class="title">翻卡牌小组件</text>
	</view>
	<FildCard ref="fildCardEl"></FildCard>
  </view>
</template>

<script setup lang="ts">
import { ref ,onMounted,onUnmounted} from 'vue'
import { signIn } from '@/api/login/login'
// 使用pinia 
import { loginStore } from "@/store/modules/loginStore";
const userStore = loginStore();
const testMethods = (() =>{
  // const Url = import.meta.env
  // uni.$u.toast('hello,我是自定义全局函数')
  // uni.$u.testGloable('我是自定义全局函数')
  // 调用pinia改变名字的方法
  console.log('改变之前',userStore.user_name)
  // 
  console.log('getUserList', userStore.getUserList)
  console.log('getUserByid', userStore.getUserById(1))
  console.log('uni.$u--',)
})
testMethods()

const requestTsts = (() =>{
  // 发送请求案例
  signIn({page:1,pageSize:10}).then(res=>{
      console.log('请求成功',res)
      // uni.$u.toast('请求成功')
  }).catch(err=>{
      console.log('请求失败22222',err)
  }).finally(()=>{
      console.log('请求结束')
  })
})


const title = ref('发起请求')

// 调用pinia方法 案例
const usepiniaMethods= (() =>{
    userStore.updateName(1)
    console.log('改变之后',userStore.user_name)
    userStore.sendRequest()
})

const jumpHome = (() =>{
    uni.navigateTo({
        url:'/pages/pageTest/index'
    })
})
const addTOken = (() =>{
  uni.setStorageSync('userInfo', { token: '123456' })
  jumpHome()
})

const jumpUview = (() =>{
  uni.navigateTo({
    url:'/pages/uviewTest/index'
  })
})


const fildCardEl:any = ref(null);
const jumpFildCard = (()=>{
	if(fildCardEl.value){
		fildCardEl.value.rotateCards()
	}
})
onMounted(()=>{
	uni.$on('onReach',(params)=>{
		console.log('params',params.value)
		if(params.value == 'home'){
			console.log('home页面发生了触底事件')
		}
	})
})
onUnmounted(()=>{
	uni.$off('onReach')
})
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .text-area{
    background: black;
    margin-top: 20px;
  }
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>